<template>
  <div class="detail-tab3 content">
    <div class="mg-b20">
      <div class="title">
        <span>当前主体评级：{{ ratingInfo.latestEntityRating || "" }}</span>
        <span>评级机构：{{ ratingInfo.ratingTypeOrganize || "" }}</span>
      </div>
      <div class="title-small">主体评级历史</div>
      <el-table :data="tableData" class="tableBoxChild">
        <el-table-column label="序号" align="center" type="index"> </el-table-column>
        <!-- <el-table-column prop="bondId" label="评级标准" align="center">
        </el-table-column> -->
        <el-table-column prop="ratingTypeOrganize" label="评级机构" align="center">
        </el-table-column>
        <el-table-column prop="latestEntityRating" label="信用评级" align="center">
        </el-table-column>
        <el-table-column prop="ratingChangeDirection" label="变动方向" align="center">
        </el-table-column>
        <el-table-column prop="entityRatingForecast" label="评级展望" align="center">
        </el-table-column>
        <el-table-column prop="ratingDate" label="评级日期" align="center">
        </el-table-column>
      </el-table>
    </div>
    <div class="content">
      <div style="text-align: right">
        <el-form
          ref="headerSearchForm"
          :model="headerSearchForm"
          :inline="true"
          label-width="100px"
        >
          <el-form-item label="年份选择" prop="ratingDate">
            <el-date-picker
              v-model="headerSearchForm.ratingDate"
              type="year"
              placeholder="选择年"
              value-format="yyyy"
            >
            </el-date-picker>
          </el-form-item>
        </el-form>
      </div>
      <div class="charts">
        <!-- 图表 -->
        <StepLine
          :id="'stepLine'"
          :chartData="chartData"
          :ratingInfoList="ratingInfoList"
          v-if="this.chartData.data.length > 0"
        />
      </div>
    </div>
  </div>
</template>

<script>
import StepLine from "./charts/StepLine.vue";
import { RatingInformation } from "@/api/customerManagement/issuerManagement/issuer.js";

export default {
  name: "DetailTab3",
  components: {
    StepLine,
  },
  props: {
    rowData: {
      type: Object,
      default: {},
    },
    ratingInfo: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      headerSearchForm: {
        ratingDate: "",
      },
      tableData: [],
      ratingInfoList: [
        "AAA",
        "AAA-",
        "AA+",
        "AA",
        "AA-",
        "A+",
        "A",
        "A-",
        "BBB+",
        "BBB",
        "BBB-",
        "BB+",
        "BB",
        "BB-",
        "B+",
        "B",
        "B-",
        "CCC+",
        "CCC",
        "CCC-",
        "CC+",
        "CC",
        "CC-",
        "C+",
        "C",
        "C-",
        "D",
      ],
      chartData: {
        xAxisData: [],
        data: {
          name: "",
          data: [],
        },
      },
    };
  },
  mounted() {},
  created() {
    this.ratingInfoList = this.ratingInfoList.reverse();
    this.getData();
  },
  watch: {
    "headerSearchForm.ratingDate": {
      handler(val, oodval) {
        this.getData();
      },
      deep: true,
    },
  },
  methods: {
    async getData() {
      const params = {
        customerId: this.rowData.customerId,
        year: this.headerSearchForm.ratingDate,
      };
      const { data } = await RatingInformation(params);
      console.log(data, "2222222222222");
      if (data) {
        this.tableData = JSON.parse(JSON.stringify(data));
        this.tableData.sort((a, b) => {
          return b.ratingDate - a.ratingDate;
        });
        data.sort((a, b) => {
          return a.ratingDate - b.ratingDate;
        });
        console.log(this.tableData, data);
        // 图表数据
        // 评级级别列表
        let xData = [];
        let yData = [];
        data.forEach((element) => {
          xData.push(element.ratingDate);
          yData.push(element.latestEntityRating);
        });
        this.chartData = {
          xAxisData: xData,
          data: [
            {
              name: "信用评级",
              data: yData,
            },
          ],
        };
      } else {
        console.log("清空数组");
        this.tableData = [];
        this.chartData = {};
      }
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 200px;
}
.content {
  width: 100%;
  height: 100%;
}
.mg-b20 {
  margin-bottom: 20px;
}
.detail-tab3 {
  color: #ffffff;
  .title {
    font-size: 16px;
    padding-bottom: 20px;
    display: flex;
    justify-content: space-between;
  }
  .title-small {
    font-size: 14px;
    padding-bottom: 20px;
  }
  .charts {
    width: 100%;
    height: 300px;
  }
}
</style>
